<div class="gutterVMd2">
  <div class="contentBox padMd clrP clrBr clrSh3">
    <div class="flexHCent">
      <h2 class="h3 clrT"><%= ob.polyT('settings.storeTab.sectionName') %></h2>
      <%= ob.processingButton({
        className: 'btn clrP clrBAttGrad clrBrDec1 clrTOnEmph modalContentCornerBtn js-save',
        btnText: ob.polyT('settings.btnSave')
      }) %>
    </div>
    <hr class="clrBr" />

    <div class="tabFormWrapper">
      <form class="box padMdKids padStack">
        <div class="flexRow gutterH">
          <div class="col3">
            <label class="required"><%= ob.polyT('settings.storeTab.storeStatus') %></label>
          </div>
          <div class="col9">
            <% if (ob.errors.vendor) print(ob.formErrorTmpl({ errors: ob.errors.vendor })) %>
            <div class="btnStrip">
              <div class="btnRadio clrBr">
                <input type="radio"
                       name="vendor"
                       value="true"
                       class="js-profileField"
                       id="settingsModerationStatusTrue"
                       data-var-type="boolean"
                <% if (ob.vendor) { %>checked<% } %>>
                <label for="settingsModerationStatusTrue"><%= ob.polyT('settings.on') %></label>
              </div>
              <div class="btnRadio clrBr">
                <input type="radio"
                       name="vendor"
                       value="false"
                       class="js-profileField"
                       id="settingsModerationStatusFalse"
                       <% if (!ob.vendor) { %>checked<% } %>
                       data-var-type="boolean">
                <label for="settingsModerationStatusFalse"><%= ob.polyT('settings.off') %></label>
              </div>
            </div>
          </div>
        </div>
      </form>
      <div class="box padMdKids padStack">
        <div class="flexRow gutterH">
          <div class="col3">
            <label class="required"><%= ob.polyT('settings.storeTab.currencies') %></label>
            <div class="clrT2 txSm rowSm"><%= ob.polyT('settings.storeTab.currenciesHelper') %></div>
            <div class="clrT2 txSm"><%= ob.polyT('settings.storeTab.currenciesNote') %></div>
          </div>
          <div class="col9">
            <% if (ob.errors.currencies) print(ob.formErrorTmpl({ errors: ob.errors.currencies })) %>
            <div class="row js-currencySelector"></div>
            <div class="flexHRight">
              <div class="js-bulkCoinUpdateBtn"></div>
            </div>
          </div>
        </div>
      </div>
      <div class="box padMdKids padStack">
        <div class="flexRow gutterH">
          <div class="col3">
            <label><%= ob.polyT('settings.storeTab.moderators') %></label>
            <div class="clrT2 txSm"><%= ob.polyT('settings.storeTab.moderatorsHelper') %></div>
          </div>
          <div class="col9">
            <div class="flexColRows gutterV">
              <div class="row">
                <h5><%= ob.polyT('settings.storeTab.selectedModerators') %></h5>
                <div class="js-modListSelected"></div>
              </div>
              <ul class="unstyled errorList hide js-submitModByIDInputError">
                <li><i class="ion-alert-circled"></i><span class="js-submitModByIDInputErrorText"></span> </li>
              </ul>
              <div class="flex gutterH">
                <input
                    type="text"
                    class="btnHeight clrBr clrP clrSh2 js-submitModByIDInput"
                    placeholder="<%= ob.polyT('settings.storeTab.moderatorByIDPlaceholder') %>">
                <%= ob.processingButton({
                className: 'btn clrP clrBr clrSh2 flexNoShrink js-submitModByID ',
                btnText: ob.polyT('settings.storeTab.moderatoryByIDSubmit')
                }) %>
              </div>
              <div class="js-modListByID"></div>
              <div>
                <div class="rowLg"><% // just a spacer %></div>
              </div>
              <div class="row">
                <div class="tx5 rowTn">
                  <div class="flexVCentClearMarg">
                    <h5 class="flexExpand"><%= ob.polyT('settings.storeTab.availableModerators') %></h5>
                    <input type="checkbox" id="storeVerifiedOnly" class="js-storeVerifiedOnly"<% if (ob.showVerifiedOnly) print('checked') %>>
                    <label class="tx5b" for="storeVerifiedOnly"><%= ob.polyT('settings.storeTab.verifiedOnly') %></label>
                  </div>
                </div>
                <ul class="unstyled errorList hide js-modListAvailableError">
                  <li><i class="ion-alert-circled"></i><span class="js-modListAvailableErrorText"></span> </li>
                </ul>
                <div class="js-modListAvailable"></div>
                <div class="noModsAdded flex clrBr <% if (ob.modsAvailable.length) print('hide') %> js-noModsAdded">
                  <button class="btn clrP clrBr browseMods js-browseMods">
                     <%= ob.polyT('settings.storeTab.browseModerators') %>
                  </button>
                </div>
              </div>
                <div class="tx6 clrT2 row">
                  <%= ob.polyT('settings.storeTab.disclaimer') %>
                </div>
            </div>
            <% if (ob.errors.storeModerators) print('<div class="row"></div>  ' + ob.formErrorTmpl({ errors: ob.errors.storeModerators })) %>
          </div>
        </div>
      </div>
    </div>
  </div>

  <div class="contentBox padMd clrP clrBr clrSh3">
    <div class="flexHRight">
      <%= ob.processingButton({
        className: 'btn clrP clrBAttGrad clrBrDec1 clrTOnEmph js-save',
        btnText: ob.polyT('settings.btnSave')
      }) %>
    </div>
  </div>
</div>
